<template>
  <el-sub-menu :index="parent.name">
    <template #title>
      <render-icon-by-key :icon-key="parent.icon" />
      <span>{{ parent.title }}</span>
    </template>
    <template v-for="item of parent.children">
      <re-sub-menu
        v-if="item.children.length"
        :key="item.name"
        :parent="item">
      </re-sub-menu>
      <el-menu-item v-else :key="item.name" :index="item.name" :route="item.fullPath">
        <render-icon-by-key :icon-key="item.icon" />
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </template>
  </el-sub-menu>
</template>

<script lang="ts" setup>
import {defineProps, PropType} from "vue";
import {
  ElMenuItem,
  ElSubMenu,
  ElIcon,
} from "element-plus";

import RenderIconByKey from '../renderIconByKey.tsx';
import { MenuMetaModel } from '../../store/menu';

const props = defineProps({
  parent: {
    type: Object as PropType<MenuMetaModel>,
    required: true
  }
});

</script>
